<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>HTML5的学习 | SongKaBaKa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="">
    <meta name="description" content="HTML5的学习基于上学期的知识，便不再从头学起，重点关注一些H5的新标签以及标签变更的属性。 首标签名是二级标题，重要属性键是三级标题。重要但是没写什么属性的就是建议后期使用样式来修改，不赞成在元素内书写样式。 a标签download：filename 规定被下载的超链接目标。 1&lt;a href&#x3D;&quot;&#x2F;images&#x2F;myw3schoolimage.jpg&quot; download&#x3D;&quot;w3logo&quot;">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML5的学习">
<meta property="og:url" content="https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="SongKaBaKa">
<meta property="og:description" content="HTML5的学习基于上学期的知识，便不再从头学起，重点关注一些H5的新标签以及标签变更的属性。 首标签名是二级标题，重要属性键是三级标题。重要但是没写什么属性的就是建议后期使用样式来修改，不赞成在元素内书写样式。 a标签download：filename 规定被下载的超链接目标。 1&lt;a href&#x3D;&quot;&#x2F;images&#x2F;myw3schoolimage.jpg&quot; download&#x3D;&quot;w3logo&quot;">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-09-22T14:26:47.159Z">
<meta property="article:modified_time" content="2020-09-22T11:49:33.111Z">
<meta property="article:author" content="Song Wani">
<meta name="twitter:card" content="summary">
    
    <link rel="shortcut icon" href="/blog/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/blog/img/brand.jpg)">
      <div class="brand">
        <a href="/blog/" class="avatar waves-effect waves-circle waves-light">
          <img src="/blog/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Song Wani</h5>
          <a href="mailto:bugsong@wo.cn" title="bugsong@wo.cn" class="mail">bugsong@wo.cn</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/blog/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                Archives
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                Tags
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                Categories
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://songbug.gitee.io/blog" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">HTML5的学习</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="Search">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">HTML5的学习</h1>
        <h5 class="subtitle">
            
                <time datetime="2020-09-22T14:26:47.159Z" itemprop="datePublished" class="page-time">
  2020-09-22
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#HTML5的学习"><span class="post-toc-number">1.</span> <span class="post-toc-text">HTML5的学习</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#a标签"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">a标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#download：filename"><span class="post-toc-number">1.1.1.</span> <span class="post-toc-text">download：filename</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#abbr标签"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">abbr标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#address标签"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">address标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#area标签"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">area标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#键alt值text"><span class="post-toc-number">1.4.1.</span> <span class="post-toc-text">键alt值text</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#可选属性值："><span class="post-toc-number">1.4.2.</span> <span class="post-toc-text">可选属性值：</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#article标签"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">article标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#aside标签"><span class="post-toc-number">1.6.</span> <span class="post-toc-text">aside标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#audio标签"><span class="post-toc-number">1.7.</span> <span class="post-toc-text">audio标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#b标签"><span class="post-toc-number">1.8.</span> <span class="post-toc-text">b标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#base标签"><span class="post-toc-number">1.9.</span> <span class="post-toc-text">base标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#键href值URL"><span class="post-toc-number">1.9.1.</span> <span class="post-toc-text">键href值URL</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#键target值参考经验"><span class="post-toc-number">1.9.2.</span> <span class="post-toc-text">键target值参考经验</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#bdo标签"><span class="post-toc-number">1.10.</span> <span class="post-toc-text">bdo标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#键dir，值ltr，trl，定义文字的方向"><span class="post-toc-number">1.10.1.</span> <span class="post-toc-text">键dir，值ltr，trl，定义文字的方向</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#big标签"><span class="post-toc-number">1.11.</span> <span class="post-toc-text">big标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#blockquote标签"><span class="post-toc-number">1.12.</span> <span class="post-toc-text">blockquote标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#button标签"><span class="post-toc-number">1.13.</span> <span class="post-toc-text">button标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#canvans标签"><span class="post-toc-number">1.14.</span> <span class="post-toc-text">canvans标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#caption标签"><span class="post-toc-number">1.15.</span> <span class="post-toc-text">caption标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#cite标签"><span class="post-toc-number">1.16.</span> <span class="post-toc-text">cite标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#datalist标签"><span class="post-toc-number">1.17.</span> <span class="post-toc-text">datalist标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#dl-gt-dt-dd"><span class="post-toc-number">1.18.</span> <span class="post-toc-text">dl&gt;dt+dd</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#del标签"><span class="post-toc-number">1.19.</span> <span class="post-toc-text">del标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#cite-URL，指向另一个解释删除原因的文档"><span class="post-toc-number">1.19.1.</span> <span class="post-toc-text">cite-URL，指向另一个解释删除原因的文档</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#datetime-YYYYMMDD，定义被删除的日期和时间"><span class="post-toc-number">1.19.2.</span> <span class="post-toc-text">datetime-YYYYMMDD，定义被删除的日期和时间</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#details标签"><span class="post-toc-number">1.20.</span> <span class="post-toc-text">details标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#details标签-1"><span class="post-toc-number">1.21.</span> <span class="post-toc-text">details标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#open-open，定义details是否可见"><span class="post-toc-number">1.21.1.</span> <span class="post-toc-text">open-open，定义details是否可见</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#embed标签"><span class="post-toc-number">1.22.</span> <span class="post-toc-text">embed标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#属性有：宽width，高height，类型type，双人床src"><span class="post-toc-number">1.22.1.</span> <span class="post-toc-text">属性有：宽width，高height，类型type，双人床src</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#fieldset标签"><span class="post-toc-number">1.23.</span> <span class="post-toc-text">fieldset标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#figcaption标签"><span class="post-toc-number">1.24.</span> <span class="post-toc-text">figcaption标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#footer标签"><span class="post-toc-number">1.25.</span> <span class="post-toc-text">footer标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#form标签"><span class="post-toc-number">1.26.</span> <span class="post-toc-text">form标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#action-URL-规定提交表单时向何处发送表单数据"><span class="post-toc-number">1.26.1.</span> <span class="post-toc-text">action-URL 规定提交表单时向何处发送表单数据</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#autocomplete-on，off-规定是否启用表单的自动完成功能。"><span class="post-toc-number">1.26.2.</span> <span class="post-toc-text">autocomplete-on，off 规定是否启用表单的自动完成功能。</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#enctype，规定在发送表单数据前如何对齐进行编码"><span class="post-toc-number">1.26.3.</span> <span class="post-toc-text">enctype，规定在发送表单数据前如何对齐进行编码</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#method-get，post-规定用于发送form-data的HTTP方法"><span class="post-toc-number">1.26.4.</span> <span class="post-toc-text">method-get，post 规定用于发送form-data的HTTP方法</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#name-form-name-规定表单的名称"><span class="post-toc-number">1.26.5.</span> <span class="post-toc-text">name-form_name 规定表单的名称</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#novalidate-novalidate-如果使用该属性，提交表单时不进行验证。"><span class="post-toc-number">1.26.6.</span> <span class="post-toc-text">novalidate-novalidate 如果使用该属性，提交表单时不进行验证。</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#target-参考经验"><span class="post-toc-number">1.26.7.</span> <span class="post-toc-text">target-参考经验</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#frameset标签"><span class="post-toc-number">1.27.</span> <span class="post-toc-text">frameset标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#frameset标签-1"><span class="post-toc-number">1.28.</span> <span class="post-toc-text">frameset标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#header标签"><span class="post-toc-number">1.29.</span> <span class="post-toc-text">header标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#iframe标签"><span class="post-toc-number">1.30.</span> <span class="post-toc-text">iframe标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#lable标签"><span class="post-toc-number">1.31.</span> <span class="post-toc-text">lable标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#legend标签"><span class="post-toc-number">1.32.</span> <span class="post-toc-text">legend标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#main元素"><span class="post-toc-number">1.33.</span> <span class="post-toc-text">main元素</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#map标签"><span class="post-toc-number">1.34.</span> <span class="post-toc-text">map标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#mark标签"><span class="post-toc-number">1.35.</span> <span class="post-toc-text">mark标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#meter标签"><span class="post-toc-number">1.36.</span> <span class="post-toc-text">meter标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#optgroup标签"><span class="post-toc-number">1.37.</span> <span class="post-toc-text">optgroup标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#p标签"><span class="post-toc-number">1.38.</span> <span class="post-toc-text">p标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#pre标签"><span class="post-toc-number">1.39.</span> <span class="post-toc-text">pre标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#progress标签"><span class="post-toc-number">1.40.</span> <span class="post-toc-text">progress标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#q标签"><span class="post-toc-number">1.41.</span> <span class="post-toc-text">q标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#script标签"><span class="post-toc-number">1.42.</span> <span class="post-toc-text">script标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#section标签"><span class="post-toc-number">1.43.</span> <span class="post-toc-text">section标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#select标签"><span class="post-toc-number">1.44.</span> <span class="post-toc-text">select标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#autofocus-autofocus-规定在页面加载后文本区域自动获得焦点。"><span class="post-toc-number">1.45.</span> <span class="post-toc-text">autofocus-autofocus 规定在页面加载后文本区域自动获得焦点。</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#required-required-规定文本区域是必填的。"><span class="post-toc-number">1.46.</span> <span class="post-toc-text">required-required 规定文本区域是必填的。</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#small标签"><span class="post-toc-number">1.47.</span> <span class="post-toc-text">small标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#source标签"><span class="post-toc-number">1.48.</span> <span class="post-toc-text">source标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#span标签"><span class="post-toc-number">1.49.</span> <span class="post-toc-text">span标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#summary标签"><span class="post-toc-number">1.50.</span> <span class="post-toc-text">summary标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#table标签"><span class="post-toc-number">1.51.</span> <span class="post-toc-text">table标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#tbody标签"><span class="post-toc-number">1.52.</span> <span class="post-toc-text">tbody标签</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#textarea"><span class="post-toc-number">1.53.</span> <span class="post-toc-text">textarea</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#time标签"><span class="post-toc-number">1.54.</span> <span class="post-toc-text">time标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#datetime-’yyyy-mm-dd‘-规定日期-时间。否则，由元素的内容给定日期-时间。"><span class="post-toc-number">1.54.1.</span> <span class="post-toc-text">datetime-’yyyy-mm-dd‘ 规定日期 &#x2F; 时间。否则，由元素的内容给定日期 &#x2F; 时间。</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#pubdate‘yyyy-mm-dd’指示-lt-time-gt-元素中的日期-时间是文档（或-lt-article-gt-元素）的发布日期。"><span class="post-toc-number">1.54.2.</span> <span class="post-toc-text">pubdate‘yyyy-mm-dd’指示 &lt; time &gt; 元素中的日期 &#x2F; 时间是文档（或 &lt; article &gt; 元素）的发布日期。</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#vedio标签"><span class="post-toc-number">1.55.</span> <span class="post-toc-text">vedio标签</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#src-URL-要播放的视频的地址"><span class="post-toc-number">1.55.1.</span> <span class="post-toc-text">src-URL 要播放的视频的地址</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#autoplay-autoplay-自动播放"><span class="post-toc-number">1.55.2.</span> <span class="post-toc-text">autoplay-autoplay 自动播放</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#controls-controls-如果出现，则给用户显示控件"><span class="post-toc-number">1.55.3.</span> <span class="post-toc-text">controls-controls 如果出现，则给用户显示控件</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#height，width设置宽和高，单位像素"><span class="post-toc-number">1.55.4.</span> <span class="post-toc-text">height，width设置宽和高，单位像素</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#loop-loop循环播放"><span class="post-toc-number">1.55.5.</span> <span class="post-toc-text">loop-loop循环播放</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#muted-muted-静音的"><span class="post-toc-number">1.55.6.</span> <span class="post-toc-text">muted-muted 静音的</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#poster-URL下载时显示的图像，或者在播放前显示的图像，即封面"><span class="post-toc-number">1.55.7.</span> <span class="post-toc-text">poster-URL下载时显示的图像，或者在播放前显示的图像，即封面</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#preload-preload-如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用-“autoplay”，则忽略该属性。"><span class="post-toc-number">1.55.8.</span> <span class="post-toc-text">preload-preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>


<article id="post-HTML5的学习"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">HTML5的学习</h1>
        <div class="post-meta">
            <time class="post-time" title="2020-09-22 22:26:47" datetime="2020-09-22T14:26:47.159Z"  itemprop="datePublished">2020-09-22</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h1 id="HTML5的学习"><a href="#HTML5的学习" class="headerlink" title="HTML5的学习"></a>HTML5的学习</h1><p>基于上学期的知识，便不再从头学起，重点关注一些H5的新标签以及标签变更的属性。</p>
<p>首标签名是二级标题，重要属性键是三级标题。重要但是没写什么属性的就是建议后期使用样式来修改，不赞成在元素内书写样式。</p>
<h2 id="a标签"><a href="#a标签" class="headerlink" title="a标签"></a>a标签</h2><h3 id="download：filename"><a href="#download：filename" class="headerlink" title="download：filename"></a>download：filename</h3><p> 规定被下载的超链接目标。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"/images/myw3schoolimage.jpg"</span> <span class="attr">download</span>=<span class="string">"w3logo"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>H5中不推荐使用name对锚点进行设置，首选是id</p>
<h2 id="abbr标签"><a href="#abbr标签" class="headerlink" title="abbr标签"></a>abbr标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">The <span class="tag">&lt;<span class="name">abbr</span> <span class="attr">title</span>=<span class="string">"People's Republic of China"</span>&gt;</span>PRC<span class="tag">&lt;/<span class="name">abbr</span>&gt;</span> was founded in 1949.</span><br></pre></td></tr></table></figure>

<p>标记一个缩写，可以理解为特化标签。</p>
<h2 id="address标签"><a href="#address标签" class="headerlink" title="address标签"></a>address标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">address</span>&gt;</span></span><br><span class="line">Written by <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"mailto:webmaster@example.com"</span>&gt;</span>Donald Duck<span class="tag">&lt;/<span class="name">a</span>&gt;</span>.<span class="tag">&lt;<span class="name">br</span>&gt;</span> </span><br><span class="line">Visit us at:<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">Example.com<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">Box 564, Disneyland<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">USA</span><br><span class="line"><span class="tag">&lt;/<span class="name">address</span>&gt;</span></span><br></pre></td></tr></table></figure>

<address> 标签定义文档或文章的作者/拥有者的联系信息。

<p>如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。</p>
<p>如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。</p>
<p>_<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。</p>
<p>理解为特化标签。</p>
<h2 id="area标签"><a href="#area标签" class="headerlink" title="area标签"></a>area标签</h2><p>一般结合map（双标签）使用，area是单标签。</p>
<p>标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"planets.jpg"</span> <span class="attr">border</span>=<span class="string">"0"</span> <span class="attr">usemap</span>=<span class="string">"#planetmap"</span> <span class="attr">alt</span>=<span class="string">"Planets"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">map</span> <span class="attr">name</span>=<span class="string">"planetmap"</span> <span class="attr">id</span>=<span class="string">"planetmap"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"circle"</span> <span class="attr">coords</span>=<span class="string">"180,139,14"</span> <span class="attr">href</span> =<span class="string">"venus.html"</span> <span class="attr">alt</span>=<span class="string">"Venus"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"circle"</span> <span class="attr">coords</span>=<span class="string">"129,161,10"</span> <span class="attr">href</span> =<span class="string">"mercur.html"</span> <span class="attr">alt</span>=<span class="string">"Mercury"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"rect"</span> <span class="attr">coords</span>=<span class="string">"0,0,110,260"</span> <span class="attr">href</span> =<span class="string">"sun.html"</span> <span class="attr">alt</span>=<span class="string">"Sun"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">map</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>大概就是指定图像的某一区域，用于点击触发超链接。</p>
<h3 id="键alt值text"><a href="#键alt值text" class="headerlink" title="键alt值text"></a>键alt值text</h3><p>定义此区域的替换文本</p>
<h3 id="可选属性值："><a href="#可选属性值：" class="headerlink" title="可选属性值："></a>可选属性值：</h3><p>coords-坐标值</p>
<p>href-URL</p>
<p>nohref-nohref 看起来像映射区域取反</p>
<p>shape-default，rect，circ，poly，对应着就是全部，矩形，圆形，多边形</p>
<p>target-参考经验</p>
<h2 id="article标签"><a href="#article标签" class="headerlink" title="article标签"></a>article标签</h2><p>标签规定独立的自包含内容。</p>
<p>一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。</p>
<p>特化标签。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Internet Explorer 9<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="aside标签"><a href="#aside标签" class="headerlink" title="aside标签"></a>aside标签</h2><p>标签定义其所处内容之外的内容。</p>
<p>aside 的内容应该与附近的内容相关。</p>
<p>大概就是书上那种文言文注释的感觉，文章中涉及到一些专业词汇，给予解释。</p>
<p>aside标签的内容可作用于文章的侧栏</p>
<p>特化标签。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Me and my family visited The Epcot center this summer.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">aside</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h4</span>&gt;</span>Epcot Center<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">The Epcot Center is a theme park in Disney World, Florida.</span><br><span class="line"><span class="tag">&lt;/<span class="name">aside</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="audio标签"><a href="#audio标签" class="headerlink" title="audio标签"></a>audio标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">src</span>=<span class="string">"someaudio.wav"</span>&gt;</span></span><br><span class="line">您的浏览器不支持 audio 标签。</span><br><span class="line"><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>音频标签。</p>
<h2 id="b标签"><a href="#b标签" class="headerlink" title="b标签"></a>b标签</h2><p>这是将文本加粗的最后考虑标签</p>
<p>另外对应需要的作用标签是em，strong，mark</p>
<h2 id="base标签"><a href="#base标签" class="headerlink" title="base标签"></a>base标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">base</span> <span class="attr">href</span>=<span class="string">"http://www.w3school.com.cn/i/"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">base</span> <span class="attr">target</span>=<span class="string">"_blank"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"eg_smile.gif"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"http://www.w3school.com.cn"</span>&gt;</span>W3School<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>貌似这是一个缺省值，标签为页面上的所有链接规定默认地址或默认目标</p>
<h3 id="键href值URL"><a href="#键href值URL" class="headerlink" title="键href值URL"></a>键href值URL</h3><h3 id="键target值参考经验"><a href="#键target值参考经验" class="headerlink" title="键target值参考经验"></a>键target值参考经验</h3><h2 id="bdo标签"><a href="#bdo标签" class="headerlink" title="bdo标签"></a>bdo标签</h2><p>可以覆盖默认的文本方向，貌似实现了逆序输出。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">bdo</span> <span class="attr">dir</span>=<span class="string">"rtl"</span>&gt;</span>Here is some text<span class="tag">&lt;/<span class="name">bdo</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="键dir，值ltr，trl，定义文字的方向"><a href="#键dir，值ltr，trl，定义文字的方向" class="headerlink" title="键dir，值ltr，trl，定义文字的方向"></a>键dir，值ltr，trl，定义文字的方向</h3><h2 id="big标签"><a href="#big标签" class="headerlink" title="big标签"></a>big标签</h2><p>双标签，将包裹的字体放大一号，上限是7号。也可能被浏览器认为是加粗。</p>
<h2 id="blockquote标签"><a href="#blockquote标签" class="headerlink" title="blockquote标签"></a>blockquote标签</h2><p>标记长的引用，会自动添加换行和缩进，但是书写时需要一行一条引用。</p>
<p>可选属性cite规定引用来源</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">blockquote</span> <span class="attr">cite</span>=<span class="string">"http://www.wwf.org"</span>&gt;</span></span><br><span class="line">WWF's ultimate goal is to build a future where people live in harmony with nature.</span><br><span class="line"><span class="tag">&lt;/<span class="name">blockquote</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="button标签"><a href="#button标签" class="headerlink" title="button标签"></a>button标签</h2><p>如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 _<button> 与 &lt;_/button&gt; 之间的文本，而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"button"</span>&gt;</span>Click Me!<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="canvans标签"><a href="#canvans标签" class="headerlink" title="canvans标签"></a>canvans标签</h2><p>n. 帆布</p>
<p>adj. 帆布制的</p>
<p>vt. 用帆布覆盖，用帆布装备</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">canvas</span> <span class="attr">id</span>=<span class="string">"myCanvas"</span>&gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> canvas=<span class="built_in">document</span>.getElementById(<span class="string">'myCanvas'</span>);</span></span><br><span class="line"><span class="actionscript"><span class="keyword">var</span> ctx=canvas.getContext(<span class="string">'2d'</span>);</span></span><br><span class="line"><span class="actionscript">ctx.fillStyle=<span class="string">'#FF0000'</span>;</span></span><br><span class="line">ctx.fillRect(0,0,80,100);</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>标签定义图形，比如图标和其他图像。该标签只是容器，必须使用脚本来绘制图形。</p>
<p>属性有宽和高，单位是px，定义画布的大小。</p>
<h2 id="caption标签"><a href="#caption标签" class="headerlink" title="caption标签"></a>caption标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">caption</span>&gt;</span>Monthly savings<span class="tag">&lt;/<span class="name">caption</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">th</span>&gt;</span>Month<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">th</span>&gt;</span>Savings<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>January<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>$100<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>caption 元素定义表格标题。</p>
<p><strong>caption 标签必须紧随 table 标签之后</strong>。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。</p>
<h2 id="cite标签"><a href="#cite标签" class="headerlink" title="cite标签"></a>cite标签</h2><p>特化标签，标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。</p>
<p>按照惯例，引用的文本将以斜体显示。</p>
<h2 id="datalist标签"><a href="#datalist标签" class="headerlink" title="datalist标签"></a>datalist标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">id</span>=<span class="string">"myCar"</span> <span class="attr">list</span>=<span class="string">"cars"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">datalist</span> <span class="attr">id</span>=<span class="string">"cars"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"BMW"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Ford"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"Volvo"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">datalist</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>这些可能的车厂都不会显示出来，只在进入输入状态之后，给予提示。</p>
<p>datalist用id规定，输入框提供list绑定这个数据列表标签</p>
<p>datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。</p>
<p>请使用 input 元素的 list 属性来绑定 datalist。</p>
<h2 id="dl-gt-dt-dd"><a href="#dl-gt-dt-dd" class="headerlink" title="dl&gt;dt+dd"></a>dl&gt;dt+dd</h2><p>自定义列表标签</p>
<h2 id="del标签"><a href="#del标签" class="headerlink" title="del标签"></a>del标签</h2><p>定义文档中被删除的文本，配合ins标签来使用，来描述文档中的更新和修改。</p>
<h3 id="cite-URL，指向另一个解释删除原因的文档"><a href="#cite-URL，指向另一个解释删除原因的文档" class="headerlink" title="cite-URL，指向另一个解释删除原因的文档"></a>cite-URL，指向另一个解释删除原因的文档</h3><h3 id="datetime-YYYYMMDD，定义被删除的日期和时间"><a href="#datetime-YYYYMMDD，定义被删除的日期和时间" class="headerlink" title="datetime-YYYYMMDD，定义被删除的日期和时间"></a>datetime-YYYYMMDD，定义被删除的日期和时间</h3><h2 id="details标签"><a href="#details标签" class="headerlink" title="details标签"></a>details标签</h2><h2 id="details标签-1"><a href="#details标签-1" class="headerlink" title="details标签"></a>details标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">details</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">summary</span>&gt;</span>Copyright 2011.<span class="tag">&lt;/<span class="name">summary</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>All pages and graphics on this web site are the property of W3School.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">details</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>与summary标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。</p>
<h3 id="open-open，定义details是否可见"><a href="#open-open，定义details是否可见" class="headerlink" title="open-open，定义details是否可见"></a>open-open，定义details是否可见</h3><h2 id="embed标签"><a href="#embed标签" class="headerlink" title="embed标签"></a>embed标签</h2><p>定义嵌入的内容，比如插件。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">embed</span> <span class="attr">src</span>=<span class="string">"helloword.swf"</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="属性有：宽width，高height，类型type，双人床src"><a href="#属性有：宽width，高height，类型type，双人床src" class="headerlink" title="属性有：宽width，高height，类型type，双人床src"></a>属性有：宽width，高height，类型type，双人床src</h3><h2 id="fieldset标签"><a href="#fieldset标签" class="headerlink" title="fieldset标签"></a>fieldset标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">legend</span>&gt;</span>健康信息<span class="tag">&lt;/<span class="name">legend</span>&gt;</span></span><br><span class="line">    身高：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /&gt;</span></span><br><span class="line">    体重：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>使用legend(双标签)为fieldset标签定义标题。</p>
<p>disabled-disabled，禁用fieldset</p>
<p>form-form_id，规定fieldset所属的一个或多个表单。</p>
<p>name-value规定fieldset的名称。</p>
<h2 id="figcaption标签"><a href="#figcaption标签" class="headerlink" title="figcaption标签"></a>figcaption标签</h2><p>大概类似summary标签，嵌套在details里一样，</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">figure</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">figcaption</span>&gt;</span>黄浦江上的的卢浦大桥<span class="tag">&lt;/<span class="name">figcaption</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"shanghai_lupu_bridge.jpg"</span> <span class="attr">width</span>=<span class="string">"350"</span> <span class="attr">height</span>=<span class="string">"234"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">figure</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="footer标签"><a href="#footer标签" class="headerlink" title="footer标签"></a>footer标签</h2><p>标签定义文档或节的页脚。</p>
<p>footer元素内的联系信息应该位于address</p>
<p>元素应当含有其包含元素的信息。</p>
<p>页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。</p>
<p>您可以在一个文档中使用多个 <footer> 元素。</p>
<h2 id="form标签"><a href="#form标签" class="headerlink" title="form标签"></a>form标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">"form_action.asp"</span> <span class="attr">method</span>=<span class="string">"get"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>First name: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"fname"</span> /&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>Last name: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"lname"</span> /&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"Submit"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="action-URL-规定提交表单时向何处发送表单数据"><a href="#action-URL-规定提交表单时向何处发送表单数据" class="headerlink" title="action-URL 规定提交表单时向何处发送表单数据"></a>action-URL 规定提交表单时向何处发送表单数据</h3><h3 id="autocomplete-on，off-规定是否启用表单的自动完成功能。"><a href="#autocomplete-on，off-规定是否启用表单的自动完成功能。" class="headerlink" title="autocomplete-on，off 规定是否启用表单的自动完成功能。"></a>autocomplete-on，off 规定是否启用表单的自动完成功能。</h3><h3 id="enctype，规定在发送表单数据前如何对齐进行编码"><a href="#enctype，规定在发送表单数据前如何对齐进行编码" class="headerlink" title="enctype，规定在发送表单数据前如何对齐进行编码"></a>enctype，规定在发送表单数据前如何对齐进行编码</h3><p>enctype 属性可能的值：</p>
<ul>
<li>application/x-www-form-urlencoded</li>
<li>multipart/form-data</li>
<li>text/plain</li>
</ul>
<h3 id="method-get，post-规定用于发送form-data的HTTP方法"><a href="#method-get，post-规定用于发送form-data的HTTP方法" class="headerlink" title="method-get，post 规定用于发送form-data的HTTP方法"></a>method-get，post 规定用于发送form-data的HTTP方法</h3><h3 id="name-form-name-规定表单的名称"><a href="#name-form-name-规定表单的名称" class="headerlink" title="name-form_name 规定表单的名称"></a>name-form_name 规定表单的名称</h3><h3 id="novalidate-novalidate-如果使用该属性，提交表单时不进行验证。"><a href="#novalidate-novalidate-如果使用该属性，提交表单时不进行验证。" class="headerlink" title="novalidate-novalidate 如果使用该属性，提交表单时不进行验证。"></a>novalidate-novalidate 如果使用该属性，提交表单时不进行验证。</h3><h3 id="target-参考经验"><a href="#target-参考经验" class="headerlink" title="target-参考经验"></a>target-参考经验</h3><h2 id="frameset标签"><a href="#frameset标签" class="headerlink" title="frameset标签"></a>frameset标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">frameset</span> <span class="attr">cols</span>=<span class="string">"25%,50%,25%"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"frame_a.htm"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"frame_b.htm"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">frame</span> <span class="attr">src</span>=<span class="string">"frame_c.htm"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">frameset</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>标签定义 frameset 中的一个特定的窗口（框架）。</p>
<p>frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。</p>
<p>frameborder-1,0 规定是否显示周围的边框</p>
<p>longdesc-URL 规定一个包含有关框架内容的长描述的页面。<strong>框架描述</strong></p>
<p>marginheight，marginwidth，单位像素规定框架的边距</p>
<p>name-name规定框架的名称</p>
<p>noresize-noresize规定无法调整框架的大小</p>
<p>scrolling-yes，no，auto，规定是否在框架中显示滚动条</p>
<p>src，规定页面html文档</p>
<h2 id="frameset标签-1"><a href="#frameset标签-1" class="headerlink" title="frameset标签"></a>frameset标签</h2><p>可选属性，cols列，rows行。单位是像素，百分比，星号</p>
<p>星号是集中分割页面剩余空间</p>
<h2 id="header标签"><a href="#header标签" class="headerlink" title="header标签"></a>header标签</h2><p>特化标签。定义文档的页眉</p>
<h2 id="iframe标签"><a href="#iframe标签" class="headerlink" title="iframe标签"></a>iframe标签</h2><p>元素会创建包含另外一个文档的内联框架（即行内框架）</p>
<p>一大堆属性和新属性，但是初期用不到，暂时不做研究。</p>
<h2 id="lable标签"><a href="#lable标签" class="headerlink" title="lable标签"></a>lable标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"male"</span>&gt;</span>Male<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"sex"</span> <span class="attr">id</span>=<span class="string">"male"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">br</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"female"</span>&gt;</span>Female<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"radio"</span> <span class="attr">name</span>=<span class="string">"sex"</span> <span class="attr">id</span>=<span class="string">"female"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>增加点击范围，提高交互性。</p>
<p>for-id，规定绑定到哪个元素</p>
<p>form-formid，限定这东西对哪一个表单起作用</p>
<h2 id="legend标签"><a href="#legend标签" class="headerlink" title="legend标签"></a>legend标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">fieldset</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">legend</span>&gt;</span>health information<span class="tag">&lt;/<span class="name">legend</span>&gt;</span></span><br><span class="line">    height: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /&gt;</span></span><br><span class="line">    weight: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">fieldset</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>就是fieldset的标题，围绕着表单的特殊的边框之类的</p>
<p>有着属性align但不推荐使用</p>
<h2 id="main元素"><a href="#main元素" class="headerlink" title="main元素"></a>main元素</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">main</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Web Browsers<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Google Chrome<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Internet Explorer<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">article</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>Mozilla Firefox<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">article</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">main</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">在一个文档中，不能出现一个以上的 &lt;main&gt; 元素。&lt;main&gt; 元素不能是以下元素的后代：</span><br><span class="line">&lt;article&gt;、&lt;aside&gt;、&lt;footer&gt;、&lt;header&gt; 或 &lt;nav&gt;。</span><br></pre></td></tr></table></figure>

<h2 id="map标签"><a href="#map标签" class="headerlink" title="map标签"></a>map标签</h2><p>带有可点击区域的图像映射，点击图片的某一部分就可以实现跳转，类似手机广告点了就下载。</p>
<p>结合area标签使用，规定某个区域响应某个事件。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"planets.jpg"</span> <span class="attr">border</span>=<span class="string">"0"</span> <span class="attr">usemap</span>=<span class="string">"#planetmap"</span> <span class="attr">alt</span>=<span class="string">"Planets"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">map</span> <span class="attr">name</span>=<span class="string">"planetmap"</span> <span class="attr">id</span>=<span class="string">"planetmap"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"circle"</span> <span class="attr">coords</span>=<span class="string">"180,139,14"</span> <span class="attr">href</span> =<span class="string">"venus.html"</span> <span class="attr">alt</span>=<span class="string">"Venus"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"circle"</span> <span class="attr">coords</span>=<span class="string">"129,161,10"</span> <span class="attr">href</span> =<span class="string">"mercur.html"</span> <span class="attr">alt</span>=<span class="string">"Mercury"</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">shape</span>=<span class="string">"rect"</span> <span class="attr">coords</span>=<span class="string">"0,0,110,260"</span> <span class="attr">href</span> =<span class="string">"sun.html"</span> <span class="attr">alt</span>=<span class="string">"Sun"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">map</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>必须属性id</p>
<p>id-unique_name 为map标签定义唯一的名称</p>
<h2 id="mark标签"><a href="#mark标签" class="headerlink" title="mark标签"></a>mark标签</h2><p>突出显示部分文本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>Do not forget to buy <span class="tag">&lt;<span class="name">mark</span>&gt;</span>milk<span class="tag">&lt;/<span class="name">mark</span>&gt;</span> today.<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>默认是黄色背景，标出来</p>
<h2 id="meter标签"><a href="#meter标签" class="headerlink" title="meter标签"></a>meter标签</h2><p>跟我们课程所学没有任何区别，</p>
<p>high，low，注意这俩不是长和宽，规定被视作最高和最低的值的范围，多少是多啊</p>
<p>max，min，规定范围的最大最小值。</p>
<p>optimum，规定度量的优化值，期待值。</p>
<p>value 规定当前的值！</p>
<p>form-form_id 规定该元素所属表单</p>
<h2 id="optgroup标签"><a href="#optgroup标签" class="headerlink" title="optgroup标签"></a>optgroup标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">select</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">optgroup</span> <span class="attr">label</span>=<span class="string">"Swedish Cars"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> =<span class="string">"volvo"</span>&gt;</span>Volvo<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> =<span class="string">"saab"</span>&gt;</span>Saab<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">optgroup</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">optgroup</span> <span class="attr">label</span>=<span class="string">"German Cars"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> =<span class="string">"mercedes"</span>&gt;</span>Mercedes<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span> =<span class="string">"audi"</span>&gt;</span>Audi<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">optgroup</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">select</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>通过optgroup标签吧相关的选项组合在一起，作为标题，不可选中，下面是细节选项。</p>
<p>在制作下拉列表的时候用过</p>
<h2 id="p标签"><a href="#p标签" class="headerlink" title="p标签"></a>p标签</h2><p>标记一个段落，元素会自动在其前后创建一些空白。</p>
<h2 id="pre标签"><a href="#pre标签" class="headerlink" title="pre标签"></a>pre标签</h2><p>pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。</p>
<h2 id="progress标签"><a href="#progress标签" class="headerlink" title="progress标签"></a>progress标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">progress</span> <span class="attr">value</span>=<span class="string">"22"</span> <span class="attr">max</span>=<span class="string">"100"</span>&gt;</span><span class="tag">&lt;/<span class="name">progress</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>标签标示任务的进度（进程）</p>
<p>max，value，值都是数字，规定一共需要做多少和已经完成了多少</p>
<h2 id="q标签"><a href="#q标签" class="headerlink" title="q标签"></a>q标签</h2><p>标记简短的引用，大概就是说话中忽然插进来一句古诗一样。会在前后添加双引号。</p>
<h2 id="script标签"><a href="#script标签" class="headerlink" title="script标签"></a>script标签</h2><p>会引入脚本就行了，异步什么的不作要求</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span>&lt;![CDATA[</span><br><span class="line"><span class="javascript">  <span class="built_in">document</span>.write(<span class="string">"Hello World!"</span>)</span></span><br><span class="line"><span class="actionscript"><span class="comment">//]]&gt;</span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="section标签"><a href="#section标签" class="headerlink" title="section标签"></a>section标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">h1</span>&gt;</span>PRC<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span>The People's Republic of China was born in 1949...<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">section</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>cite-URL section 的 URL，假如 section 摘自 web 的话。</p>
<p> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。</p>
<h2 id="select标签"><a href="#select标签" class="headerlink" title="select标签"></a>select标签</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;select&gt;</span><br><span class="line">  &lt;option value &#x3D;&quot;volvo&quot;&gt;Volvo&lt;&#x2F;option&gt;</span><br><span class="line">  &lt;option value &#x3D;&quot;saab&quot;&gt;Saab&lt;&#x2F;option&gt;</span><br><span class="line">  &lt;option value&#x3D;&quot;opel&quot;&gt;Opel&lt;&#x2F;option&gt;</span><br><span class="line">  &lt;option value&#x3D;&quot;audi&quot;&gt;Audi&lt;&#x2F;option&gt;</span><br><span class="line">&lt;&#x2F;select&gt;</span><br></pre></td></tr></table></figure>

<p>元素中的option标签用于定义列表中的可用选项</p>
<h2 id="autofocus-autofocus-规定在页面加载后文本区域自动获得焦点。"><a href="#autofocus-autofocus-规定在页面加载后文本区域自动获得焦点。" class="headerlink" title="autofocus-autofocus 规定在页面加载后文本区域自动获得焦点。"></a>autofocus-autofocus 规定在页面加载后文本区域自动获得焦点。</h2><h2 id="required-required-规定文本区域是必填的。"><a href="#required-required-规定文本区域是必填的。" class="headerlink" title="required-required 规定文本区域是必填的。"></a>required-required 规定文本区域是必填的。</h2><h2 id="small标签"><a href="#small标签" class="headerlink" title="small标签"></a>small标签</h2><p>标签呈现小号的字体效果，与big标签配对。但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用</p>
<h2 id="source标签"><a href="#source标签" class="headerlink" title="source标签"></a>source标签</h2><p>拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">controls</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">"horse.ogg"</span> <span class="attr">type</span>=<span class="string">"audio/ogg"</span>&gt;</span></span><br><span class="line">   <span class="tag">&lt;<span class="name">source</span> <span class="attr">src</span>=<span class="string">"horse.mp3"</span> <span class="attr">type</span>=<span class="string">"audio/mpeg"</span>&gt;</span></span><br><span class="line"> Your browser does not support the audio element.</span><br><span class="line"><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。</p>
<p>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。</p>
<h2 id="span标签"><a href="#span标签" class="headerlink" title="span标签"></a>span标签</h2><p>标签用来组合文档中的行内元素。</p>
<p>请使用 <span> 来组合行内元素，以便通过样式来格式化它们。</p>
<p>span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。</p>
<h2 id="summary标签"><a href="#summary标签" class="headerlink" title="summary标签"></a>summary标签</h2><p>与details标签配合使用</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">details</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">summary</span>&gt;</span>HTML 5<span class="tag">&lt;/<span class="name">summary</span>&gt;</span></span><br><span class="line">This document teaches you everything you have to learn about HTML 5.</span><br><span class="line"><span class="tag">&lt;/<span class="name">details</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>制作详情和概括两个页面</p>
<h2 id="table标签"><a href="#table标签" class="headerlink" title="table标签"></a>table标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">th</span>&gt;</span>Month<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">th</span>&gt;</span>Savings<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>January<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>$100<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>th可以理解为table head</p>
<p>tr理解为table row</p>
<p>td理解为table 单元格</p>
<h2 id="tbody标签"><a href="#tbody标签" class="headerlink" title="tbody标签"></a>tbody标签</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">thead</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>Month<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">th</span>&gt;</span>Savings<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">thead</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">tfoot</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>Sum<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>$180<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tfoot</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">tbody</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>January<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>$100<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>February<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">td</span>&gt;</span>$80<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tbody</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>thead可以理解为table head</p>
<p>tbody可以理解为table body，表格的身体</p>
<p>tfoot以此类推</p>
<h2 id="textarea"><a href="#textarea" class="headerlink" title="textarea"></a>textarea</h2><p>标签定义多行的文本输入控件。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">rows</span>=<span class="string">"3"</span> <span class="attr">cols</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">在w3school，你可以找到你所需要的所有的网站建设教程。</span><br><span class="line"><span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>autofocus-autofocus自动对焦</p>
<p>cols，rows限定行列</p>
<p>disabled-disabled 禁用。</p>
<p>maxlength-number，最大长度</p>
<p>readonly-readonly只读</p>
<p>required-required必填</p>
<p>wrap-hard，soft规定提交表单时，文本区域如何换行</p>
<h2 id="time标签"><a href="#time标签" class="headerlink" title="time标签"></a>time标签</h2><p>特化标签。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>我们在每天早上 <span class="tag">&lt;<span class="name">time</span>&gt;</span>9:00<span class="tag">&lt;/<span class="name">time</span>&gt;</span> 开始营业。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>我在 <span class="tag">&lt;<span class="name">time</span> <span class="attr">datetime</span>=<span class="string">"2008-02-14"</span>&gt;</span>情人节<span class="tag">&lt;/<span class="name">time</span>&gt;</span> 有个约会。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="datetime-’yyyy-mm-dd‘-规定日期-时间。否则，由元素的内容给定日期-时间。"><a href="#datetime-’yyyy-mm-dd‘-规定日期-时间。否则，由元素的内容给定日期-时间。" class="headerlink" title="datetime-’yyyy-mm-dd‘ 规定日期 / 时间。否则，由元素的内容给定日期 / 时间。"></a>datetime-’yyyy-mm-dd‘ 规定日期 / 时间。否则，由元素的内容给定日期 / 时间。</h3><h3 id="pubdate‘yyyy-mm-dd’指示-lt-time-gt-元素中的日期-时间是文档（或-lt-article-gt-元素）的发布日期。"><a href="#pubdate‘yyyy-mm-dd’指示-lt-time-gt-元素中的日期-时间是文档（或-lt-article-gt-元素）的发布日期。" class="headerlink" title="pubdate‘yyyy-mm-dd’指示 &lt; time &gt; 元素中的日期 / 时间是文档（或 &lt; article &gt; 元素）的发布日期。"></a>pubdate‘yyyy-mm-dd’指示 &lt; time &gt; 元素中的日期 / 时间是文档（或 &lt; article &gt; 元素）的发布日期。</h3><h2 id="vedio标签"><a href="#vedio标签" class="headerlink" title="vedio标签"></a>vedio标签</h2><p>特化标签。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;video src&#x3D;&quot;movie.ogg&quot; controls&#x3D;&quot;controls&quot;&gt;</span><br><span class="line">您的浏览器不支持 video 标签。</span><br><span class="line">&lt;&#x2F;video&gt;</span><br></pre></td></tr></table></figure>

<h3 id="src-URL-要播放的视频的地址"><a href="#src-URL-要播放的视频的地址" class="headerlink" title="src-URL 要播放的视频的地址"></a>src-URL 要播放的视频的地址</h3><h3 id="autoplay-autoplay-自动播放"><a href="#autoplay-autoplay-自动播放" class="headerlink" title="autoplay-autoplay 自动播放"></a>autoplay-autoplay 自动播放</h3><h3 id="controls-controls-如果出现，则给用户显示控件"><a href="#controls-controls-如果出现，则给用户显示控件" class="headerlink" title="controls-controls 如果出现，则给用户显示控件"></a>controls-controls 如果出现，则给用户显示控件</h3><h3 id="height，width设置宽和高，单位像素"><a href="#height，width设置宽和高，单位像素" class="headerlink" title="height，width设置宽和高，单位像素"></a>height，width设置宽和高，单位像素</h3><h3 id="loop-loop循环播放"><a href="#loop-loop循环播放" class="headerlink" title="loop-loop循环播放"></a>loop-loop循环播放</h3><h3 id="muted-muted-静音的"><a href="#muted-muted-静音的" class="headerlink" title="muted-muted 静音的"></a>muted-muted 静音的</h3><h3 id="poster-URL下载时显示的图像，或者在播放前显示的图像，即封面"><a href="#poster-URL下载时显示的图像，或者在播放前显示的图像，即封面" class="headerlink" title="poster-URL下载时显示的图像，或者在播放前显示的图像，即封面"></a>poster-URL下载时显示的图像，或者在播放前显示的图像，即封面</h3><h3 id="preload-preload-如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用-“autoplay”，则忽略该属性。"><a href="#preload-preload-如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用-“autoplay”，则忽略该属性。" class="headerlink" title="preload-preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。"></a>preload-preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。</h3>
        </div>

        <blockquote class="post-copyright">
    
    <div class="content">
        
<span class="post-time">
    Last updated: <time datetime="2020-09-22T11:49:33.111Z" itemprop="dateUpdated">2020-09-22 19:49:33</time>
</span><br>


        
        这里可以写作者留言，标签和 hexo 中所有变量及辅助函数等均可调用，示例：<a href="/blog/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/" target="_blank" rel="external">https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/</a>
        
    </div>
    
    <footer>
        <a href="https://gitee.com/songbug/blog.git">
            <img src="/blog/img/avatar.jpg" alt="Song Wani">
            Song Wani
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            

            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《HTML5的学习》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《HTML5的学习》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《HTML5的学习》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/blog/2020/09/22/%E5%AD%97%E7%AC%A6%E5%87%BA%E7%8E%B0%E6%AC%A1%E6%95%B0%E7%9A%84%E7%BB%9F%E8%AE%A1/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">字符出现次数的统计</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/blog/2020/09/22/HEXO%E7%8E%AF%E5%A2%83%E7%9A%84%E6%90%AD%E5%BB%BA/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">HEXO环境的搭建</h4>
      </a>
    </div>
  
</nav>



    




















</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢大爷~
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/blog/img/wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/blog/img/wechat.jpg" data-alipay="/blog/img/alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
            <span>This blog is licensed under a <a rel="license noopener" href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</span>
        </p>
    </div>
    <div class="bottom">
        <p><span>Song Wani &copy; 2019 - 2021</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《HTML5的学习》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/&title=《HTML5的学习》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《HTML5的学习》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=https://gitee.com/songbug/blog.git/2020/09/22/HTML5%E7%9A%84%E5%AD%A6%E4%B9%A0/" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/blog/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
